<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预览pdf文件</title>
    <!-- <link rel="stylesheet" href="../assets/pdf/viewer.css"> -->
    <style>
     html,body {
                /* width: 100%; */
                margin: 0;
                padding: 0;
                background-color: #444;
            }

            body {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }
    </style>
</head>

<body tabindex="1" class="loadingInProgress">

    <script src="../assets/pdf/pdf.js"></script>

    <script type="text/javascript">
        let DEFAUILT_URL = 'https://after-sale-1256187897.cos.ap-guangzhou.myqcloud.com/PDF/';
        let path = DEFAUILT_URL + getUrlParam('file');
        PDFJS.getDocument(path).then(pdf=>{
            var numPages = pdf.numPages;
            var start = 1;
            renderPageAsync(pdf, numPages, start);
        });
        function renderPage(pdf, numPages, current){
            console.log("renderPage");
            pdf.getPage(current++).then(page=>{
                //console.log('page', page);
                //page.getTextContent().then(v=>console.log(v));
                  var scale = 1.5;
                  var viewport = page.getViewport(scale);
                  // Prepare canvas using PDF page dimensions.
                  var canvas = document.createElement("canvas");
                  var context = canvas.getContext('2d');
                  document.body.appendChild(canvas);
                  
                  canvas.height = viewport.height;
                  canvas.width = viewport.width;
    
                  // Render PDF page into canvas context.
                  var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                  };
                  page.render(renderContext);
                  
                  //next
                  if(current<=numPages)return renderPage(pdf, numPages, current);
            });
        }
        async function renderPageAsync(pdf, numPages, current){
            console.log("renderPage async");
            for(let i=1; i<=numPages; i++){
                // page
                let page = await pdf.getPage(i);
                
                  let scale = 1.5;
                  let viewport = page.getViewport(scale);
                  // Prepare canvas using PDF page dimensions.
                  let canvas = document.createElement("canvas");
                  let context = canvas.getContext('2d');
                  document.body.appendChild(canvas);
                  
                  canvas.height = viewport.height;
                  canvas.width = viewport.width;
    
                  // Render PDF page into canvas context.
                  let renderContext = {
                        canvasContext: context,
                        viewport: viewport
                  };
                  page.render(renderContext);
            }
        }
        /**
         * 获取url中参数的方法
         * @author ww
         * @param {String} name 参数名
         * @return 参数值
         */
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        };
        </script>
</body>

</html>